<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环形文字</title>
    <!-- 原理：svg 文字或图片沿某路线排列 -->
    <style>
        .circular path{
            fill: none;
        }
        .circular{
            width: 30em;
            height: 30em;
            margin: 3em auto 0;
        }
        .circular svg{
            display: block;
            overflow: visible;
        }
    </style>
</head>
<body>
    <div class="circular">
        <svg viewBox="0 0 100 100">
            <path d="M 0,50 a 50,50 0 1,1 0,1 z"
            id="circle"/>
            <text><textPath xlink:href="#circle">
                circular reasoning works because
            </textPath></text>
        </svg>
    </div>
</body>
</html>